<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/css/newService.css"/>  
  <link rel="stylesheet" href="/jqueryui/jquery-ui.css"/>
  <title>客服</title>
</head>
<body>
<!-- <div class="login-layer-container">
  <div class="input-form-container">
    <h2 class="login-title">
      登录
    </h2>
     <div class="username-input-container"><input class="username-input" type="text" placeholder="用户名" /></div>
    <div class="userpasswd-input-container"><input class="userpasswd-input" type="password" placeholder="密码"/></div>
    <a href="javascript:;" id="login-botton">登录</a>
  </div>
</div> -->
<div class="login-layer-container">
  <div class="login-content-container">
    <div class="login-layer-title-container">
      <img class="login-layer-title-logo" src='http://comm100.lsu.pw/logoImage/dnuvhpj3'>
      <span class="login-layer-title-text">在线客服系统</span>
    </div>
    <div id="login-box">
      <div class="login-box-border-wrapper">
        <div class="login-input-title-container">
          <span class="login-input-title-text">客服登录</span>
        </div>
        <div class="username-input-container">
            <input type="text" placeholder="请输入用户名" class="username-input" />
        </div>
        <div class="userpasswd-input-container">
            <input type="password" placeholder="请输入密码" class="userpasswd-input" />
        </div>
        <div class="remember-me-input-container">
          <input type="checkbox" class="remember-me-input" checked><span class="remember-me-input-text">记住我</span>
        </div>
<!--         <div id="remenber">
            <input type="checkbox" id="cb" /><label for="cb" style="margin-left:10px;">记住密码</label>
        </div> -->
        <div class="login-button-container">
            <input type="button" value="登录" class="login-button" />
        </div>
      </div>
    </div>
  </div>
</div>
<div class="left-container">
<div class="top-logo-container">
  <!-- <img src="/img/Comm100_logo.png"> -->
  <img src="http://comm100.lsu.pw/logoImage/dnuvhpj3">
</div>
<div class="contacts-container">
  <ul class="contacts-tags">
    <li class="contacts-custom-tag">
      <a href="#custom-list-tab">在线访客</a>
    </li>
    <li class="contacts-service-tag">
      <a href="#service-list-tab">客服名单</a>
    </li>
  </ul>
  <div id="custom-list-tab">
    <ul class="custom-list">
      <!-- <li class="custom-item chating" id="b74aee49_67d00cac_6203edc0_7bffef64-custom-info">
        <i class="iconfont custom-avatar">&#xe611;</i>
        <a class="custom-name" href="javascript:;">b74aee494</a><span class="custom-status"></span>
        <i class="delete-custom-buttom iconfont">&#xe603;</i>
          <span class="online-livetime">10</span>
        <p class="custom-location-info">
          <span class="location-ipaddress">192.168.1.1</span>
          <span class="custom-location-text">浙江省</span>
        </p>
        <p class="custom-viewing-url" title="http://music.163.com/#/my/m/music/playlist?id=57602536">
          http://music.163.com/#/my/m/music/playlist?id=57602536
        </p>
        <i class="iconfont custom-browser-info">&#xe616;</i>
        <i class="iconfont custom-device-info">&#xe619;</i>
      </li>
      <li class="custom-item after" id="b74aee49_67d00cac_6203edc0_7bffef64-custom-info">
        <i class="iconfont custom-avatar">&#xe611;</i>
        <a class="custom-name" href="javascript:;">b74aee494</a><span class="custom-status"></span>
        <i class="delete-custom-buttom iconfont">&#xe603;</i>
          <span class="online-livetime">10</span>
        <p class="custom-location-info">
          <span class="location-ipaddress">192.168.1.1</span>
          <span class="custom-location-text">浙江省</span>
        </p>
        <p class="custom-viewing-url" title="http://music.163.com/#/my/m/music/playlist?id=57602536">
          http://music.163.com/#/my/m/music/playlist?id=57602536
        </p>
        <i class="iconfont custom-browser-info">&#xe616;</i>
        <i class="iconfont custom-device-info">&#xe619;</i>
      </li> -->
    </ul>
  </div>
  <div id="service-list-tab">
    <ul class="service-list">
      <!-- <li class="service-item" id="oweifqwenvffksdefweu-service-item">
        <i class="iconfont custom-avatar">&#xe606;</i>
        <a class="custom-name" href="javascript:;">b74aee494</a>
      </li> -->
    </ul>
  </div>
</div>
</div>
<!--   <div class="contacts-group-custom">
    <div class="custom-titlebar">
    </div>
    <ul class="custom-list">
      <li class="custom-item" id="b74aee49_67d00cac_6203edc0_7bffef64-custom-info">
        <a class="custom-name" href="javascript:;" title="b74aee49_67d00cac_6203edc0_7bffef64">b74aee494</a>
        <span class="custom-status waiting"></span>
      </li>
    </ul>
  </div> -->
<div class="chat-panel-container">

  <!-- <div class="chat-panel active" id="b74aee49_67d00cac_6203edc0_7bffef64-custom-panel">
    <div class="chating-titlebar">
      <span>b74aee49</span>
      <a class="close-chat-panel" href="javascript:;"><i class="iconfont">&#xe603;</i></a>
    </div>
    <div class="message-board">
      <div class="message-in">
        <span class="message">hi</span>
        <p class="timestamp">Apr 20 2016 20:57:38</p>
      </div>
      <div class="message-out">
        <span>lasillllifwzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</span>
        <p class="timestamp">Apr 20 2016 20:57:38</p>
      </div>
    </div>
  </div> -->
  <ul class="chat-panel-list">
    <!-- <li class="chat-panel active" id="service-chating-room">
      <div class="chat-panel-titlebar">
        <span class="chat-panel-title-text">客服聊天室</span>
      </div>
      <div class="chat-message-board"> -->
<!--         <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hi</span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-out">
          <span class="text-message">hello<img class="emoji-message" src="./emoji/qq/1.gif">
          </span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="system-message">
          <span class="system-message-text">客服小王加入聊天</span>
        </div>
        <div class="message-in">
          <span class="message-sender">小王发送了一个文件</span>
          <a class="file-download-button" href="http://49.lsu.pw/owncloud/index.php/s/unvPxSEG3pXOnZ2/download"><i class="iconfont">&#xe606;</i></a>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <img class="image-message" src="http://p3.music.126.net/RERP2psAxegtKB-9qnZ58w==/1366692962511422.jpg"></img>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="message-audio-play-button">
            <i class="iconfont">&#xe606;</i><span class="message-audio-duration">1.2"</span>
          </span>
          <audio class="audio-message" controls>
            <source src="./ringtone/message.mp3" type="audio/mpeg">
          </audio>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hi<img class="emoji-message" src="./emoji/qq/1.gif"></span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hsefsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssi</span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hi</span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hi</span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hi</span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hi</span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hi</span>
          <p class="timestamp">10:23:11 5/9</p>
        </div> -->
<!--       </div>
    </li> -->
   
 <!--    <li class="chat-panel">
      <div class="chat-panel-titlebar">
        <span class="chat-panel-title-text">访客<span class="chat-panel-custom--name">tizzy bac</span>
        <span class="transmit-button">
          转接<i class="iconfont">&#xe610;</i>
        </span>
        <span class="close-chat-panel-button">
          <i class="iconfont">&#xe603;</i>
        </span>
        <span class="on-voice-prompt">
          <i class="iconfont">&#xe602;</i>
        </span>
      </div>
      <div class="chat-message-board">
        <div class="message-in">
          <span class="text-message">hi</span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="message-out">
          <span class="text-message">hello<img class="emoji-message" src="./emoji/qq/1.gif">
          </span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
        <div class="system-message">
          <span class="system-message-text">客服小王加入聊天</span>
        </div>
        <div class="message-in">
          <span class="message-sender">小王</span>
          <span class="text-message">hi<img class="emoji-message" src="./emoji/qq/1.gif"></span>
          <p class="timestamp">Apr 20 2016 20:57:38</p>
        </div>
      </div>
    </li> -->
  </ul>
</div>
<div class="input-container">
  <div class="service-info-operate-board">
    <span>当前客服:</span>
    <span class="current-service-name">小李</span>
    <select class="currents-serice-online-status">
      <option selected="selected"  value="online"><!-- <i class="iconfont">&#xe614;</i> -->在线</option>
      <option value="dnd"><!-- <i class="iconfont">&#xe612;</i> -->忙碌</option>
      <option value="away"><!-- <i class="iconfont">&#xe613;</i> -->离开</option>
      <option value="exit"><!-- <i class="iconfont">&#xe613;</i> -->退出</option>
    </select>
  </div>
  <div class="input-operate-board">
    <div class="operate-bar">
      <div class="voice-button-container">
        <a class="voice-button function-button" href="javascript:;"><i class="iconfont">&#xe602;</i></a>
      </div>
      <div class="file-button-container">
        <a class="file-button function-button" href="javascript:;"><i class="iconfont">&#xe60b;</i></a>
      </div>
      <div class="img-button-container">
        <a class="img-button function-button" href="javascript:;"><i class="iconfont">&#xe60a;</i></a>
      </div>
      <div class="emoji-button-container">
        <a class="emoji-button function-button" href="javascript:;"><i class="iconfont">&#xe607;</i></a>
      </div>
    </div>
    <div class="text-send-board">
      <input class="text-input"/>
      <button class="send-button">发送</button>
    </div>
  </div>
</div>

  <div class="clipboard-container">
    <!-- <div class="clip-container">
      <a href="javascript:;" class="clip-button">lfiwefjaefliwej</a>
      <a class="clip-delete-button" href="javascript:;">x</a>
    </div> -->
      <!-- <div class="clip-container">
        <a href="javascript:;" class="clip-button">您好,有什么可以帮您？</a>
        <a class="clip-delete-button"><i class="iconfont">&#xe603;</i></a>
      </div>
      <div class="clip-container">
        <a href="javascript:;" class="clip-button">您好,有什么可以帮您？</a>
        <a class="clip-delete-button"><i class="iconfont">&#xe603;</i></a>
      </div>
      <div class="clip-container">
        <a href="javascript:;" class="clip-button">您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？您好,有什么可以帮您？</a>
        <a class="clip-delete-button"><i class="iconfont">&#xe603;</i></a>
      </div>
      <div class="clip-container">
        <a href="javascript:;" class="clip-button">您好,有什么可以帮您？</a>
        <a class="clip-delete-button"><i class="iconfont">&#xe603;</i></a>
      </div> -->
    <div class="add-clip-container">
      <input type="text" id="add-clip-input" style="display: none;" status="hide">
      <a href="javascript:;" class="add-clip-button">添加</a>
    </div>
  </div>
<div class="img-viewer-layer" style="display: none;">
  <div class="img-viewer-contaner">
    <div class="img-viewer-close-button-container">
      <a href="javascript:;" class="img-viewer-close-button"><i class="iconfont">&#xe603;</i></a>
    </div>
    <img class="img-show" src="http://ww4.sinaimg.cn/mw690/006h4oCqjw1f3crcrv5rpj30jg0jgq4p.jpg">
  </div>
</div>
<ul id="emoji-box" style="display: none"><!-- 
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/1.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/2.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/3.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/4.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/5.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/6.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/7.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/8.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/9.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/10.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/11.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/12.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/13.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/14.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/15.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/16.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/17.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/18.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/19.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/20.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/21.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/22.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/23.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/24.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/25.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/26.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/27.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/28.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/29.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/30.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/31.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/32.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/33.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/34.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/35.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/36.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/37.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/38.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/39.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/40.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/41.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/42.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/43.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/44.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/45.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/46.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/47.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/48.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/49.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/50.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/51.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/52.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/53.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/54.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/55.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/56.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/57.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/58.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/59.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/60.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/61.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/62.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/63.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/64.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/65.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/66.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/67.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/68.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/69.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/70.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/71.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/72.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/73.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/74.gif"></li>
<li class="emoji-grid-cell"><img class="emoji-image" src="./emoji/qq/75.gif"></li> -->
</ul>
<div id="transmit-service-list-container" style="display: none">
  <div class="transmit-service-item" id="wang-service-dnuvhpj3-transmit-service">wang</div>
  <div class="transmit-service-item" id="li-service-dnuvhpj3-transmit-service">li</div>
  <div class="transmit-service-item" id="zz-service-dnuvhpj3-transmit-service">zz</div>
</div>
<div id="logbox" style="position: fixed; right: 0; bottom: 0; width: 300px; height: 300px; overflow-y: scroll; display: none"></div>
<audio class="on-message-audio" controls>
  <source src="/ringtone/message.mp3" type="audio/mpeg">
</audio>
<input id="img-input" type="file" accept="image/png,image/gif" name="img" style="display: none"/>
<input id="file-input" type="file" name="file" style="display: none"/>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/jqueryui/jquery-ui.js"></script>
<script src="/js/strophe.js"></script>
<script src="/js/strophe.roster.js"></script>
<script src="/js/strophe.register.js"></script>
<script src="/js/peer.js"></script>
<script src="/js/newService.js"></script>
</body>
</html>
